import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx';
// 性能优化  依赖图谱的插件
import { visualizer } from 'rollup-plugin-visualizer';

import postcsspxtoviewport from "postcss-px-to-viewport" //插件


import unocss from 'unocss/vite';

// https://vitejs.dev/config/
export default ({mode} : any) => {
  // 如果想在vite.config.ts 使用环境变量
  console.log(loadEnv(mode, process.cwd()))

  return defineConfig({
    plugins: [vue({
      // 使用原生web component
      template:{
        compilerOptions:{
            isCustomElement:(tag)=> tag.includes('mingle-')
        }
      },
      // Vue响应性语法糖
      reactivityTransform:true
    }), vueJsx(), unocss({
      rules:[
        [/^m-(\d+)$/, ([, d]) => ({ margin: `${Number(d) * 10}px` })],
        ['flex', { display: "flex" }],
        ['pink', { color: 'pink' }],
      ],
      // presets:[presetIcons(),presetAttributify(),presetUno()]
    }),
    // 性能优化  生成依赖图谱 只有build时候会生效
    visualizer({
      open:true
    })
    ],
    css: {
      postcss: {
        plugins: [
          postcsspxtoviewport({
            unitToConvert: 'px', // 要转化的单位
            viewportWidth: 750, // UI设计稿的宽度
            unitPrecision: 6, // 转换后的精度，即小数点位数
            propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
            viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
            fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
            selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
            minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
            mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
            replace: true, // 是否转换后直接更换属性值
            landscape: false // 是否处理横屏情况
          })
        ]
      }
    },
    // vite提供的构建优化  https://blog.csdn.net/qq1195566313/article/details/126811832
    build:{
      chunkSizeWarningLimit: 2000,
      cssCodeSplit:true, //css 拆分
      sourcemap:false, //不生成sourcemap
      minify:false, //是否禁用最小化混淆，esbuild打包速度最快，terser打包体积最小。
      assetsInlineLimit:5000 //小于该值 图片将打包成Base64 
    },
  })
}
